<template>
  <div class="launch" :style="launchStyle">
    <div class="launch-container" :style="launchContainerStyle">
      <move-item
        class="launch-item"
        v-for="item in configArray"
        :data="item"
        :key="item.app_name"
      >
        <img @dragstart.prevent :src="item.imageUrl" alt />
        <span>{{ item.app_name }}</span>
      </move-item>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import MoveItem from "./moveItem.vue";
export default {
  components: { MoveItem },
  name: "launch",
  data() {
    return {
      isMousedown: false,
      isMousemove: false, // 当item移动后，就不能触发点击事件
    };
  },
  computed: {
    ...mapState([
      // 由于backdrop-filter不兼容firefox，使用filter代替，因此需要传入背景图片
      "backgroundUrl",
      "items",
      "launchActive",
      "current",
    ]),
    launchStyle() {
      if (this.launchActive) {
        return {
          display: "block",
        };
      }
      return {
        display: "none",
      };
    },
    launchContainerStyle() {
      if (this.launchActive) {
        return {
          opacity: 1,
        };
      }
      return {
        opacity: 0,
      };
    },
    configArray() {
      return this.items.map((item) => {
        return {
          x: 0,
          y: 0,
          dx: 0,
          dy: 0,
          sitX: 0,
          sitY: 0,
          ...item,
        };
      });
    },
  },
  methods: {
    ...mapMutations([
      "SWITCH_LAUNCH_ACTIVE",
      "SET_CURRENT_TARGET",
      "SET_CURRENT_ITEM",
      "CLEAR_CURRENT",
    ]),
  },
  mounted() {},
};
</script>

<style scoped>
.launch {
  /* -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); */
  width: 100%;
  height: 90%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}
.launch .launch-container {
  box-sizing: border-box;
  padding: 32px;
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-content: start;
  flex-direction: row;
  position: relative;
  z-index: 9999;
  transition: opacity 0.3s;
}
.launch .launch-container .launch-item {
  width: 76px;
  height: 76px;
  margin-left: 82px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}
.launch .launch-container .launch-item img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
  flex-shrink: 0; /* flex盒子中的img，火狐和Google的表现不同 */
  box-shadow: 0 0 0 1px rgb(27 31 36 / 15%);
}
.launch .launch-container .launch-item span {
  font-size: 14px;
  color: white;
  margin-top: 6px;
}
</style>